<template>
	<div>
		<div class="text-xl">【文章分类使用率】</div>
		<div ref="target" class="w-full h-full"></div>
	</div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { getVisCategotyList } from '@/api/admin/category'


const data = ref([])

const total = ref(null)

const getCategoryList = async () => {
	const res = await getVisCategotyList()
	if (res.success) {
		data.value = res.data
		total.value = data.value.reduce((sum, item) => sum + item.value, 0)
	}
}
getCategoryList()

const target = ref(null)
let myChart = null
onMounted(() => {
	myChart = echarts.init(target.value)
	renderChart()
})



const renderChart = () => {
	let option = {
		// X 轴展示选项
		xAxis: {
			type: 'category',
			// 根据根据服务端数据筛选
			data: data.value.map((item) => item.name),
      axisLabel: {
				fontSize: 20,
        color: '#8193a8'
      }
		},
		// Y 轴展示数据
		yAxis: {
			// 数据展示
			type: 'value',
			// 不显示轴
			show: false,
			// 最大值（防止触顶）
			max: function (value) {
				// 取整
				return parseInt(value.max * 1.5)
			}
		},
		// echarts 网格绘制的位置，对应 上、右、下、左
		grid: {
			top: 16,
			right: 0,
			bottom: 26,
			left: -26,
			// 计算边距时，包含标签
			containLabel: true
		},
		// 柱形图核心配置
		series: {
			// 柱形图
			type: 'bar',
			// 数据筛选
			data: data.value.map((item) => ({
				name: item.name,
				value: item.value
			})),
			// 每个轴的样式
			itemStyle: {
				color: '#479AD3', // 设置柱子的颜色
				borderRadius: 5, // 设置柱子的圆角
				shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置柱子的阴影颜色
				shadowBlur: 5, // 设置柱子的阴影模糊大小
			},
			// 柱子宽度
			barWidth: 18,
			// // 文本
			label: {
				show: true,
				// 设置标签位置为右侧
				position: 'top',
				// 设置标签文本颜色
				color: '#fff',
				fontSize: 16,
				formatter: function(params) {
					var percent = (params.value / total.value * 100).toFixed(2) + '%'; // 计算百分比并保留两位小数
					return percent;
				}
			}
		}
	}
	myChart.setOption(option)
}

// 洗牌算法随机打乱数组
function shuffleArray(array) {  
  for (let i = array.length - 1; i > 0; i--) {  
    const j = Math.floor(Math.random() * (i + 1));  
    [array[i], array[j]] = [array[j], array[i]];  
  }  
  return array;  
}  

// 每隔3秒更新数据
setInterval(() => {
  data.value = shuffleArray(data.value)
}, 3000)

// 监听数据的变化，重新渲染图表
watch(() => data.value, () => renderChart(), {deep: true})
</script>